<template>
	<view>
		<view class="swiper-view">
			<swiper class="swiper-css" :autoplay="true" @change="(event) => swiperIndex = event.detail.current">
				<swiper-item v-for="(item, index) in swiperList" :key="index">
					<image :src="`${IMG_URL}${item.imgUrl}`" class="swiper-image" mode="aspectFill"></image>
				</swiper-item>

			</swiper>
			<view class="swiper-dot">
				<view v-for="(item, index) in swiperList.length" :key="index" class="dot-item"
					:class="{'dot-active':index == swiperIndex}">
				</view>
			</view>
		</view>
		<navigator v-for="(item, index) in dataList" :key="index"
			:url="`/pagesHome/companyDynamicDetail/companyDynamicDetail?detailId=${item.articleId}`" hover-class="none" class="card-view">
			<image :src="`${IMG_URL}${item.coverImg}`" mode="aspectFill" class="card-image"></image>
			<view class="card-content">
				<view class="name-text">{{item.title}}</view>
				<view class="time-view">
					<image src="/static/icon-daye.png" class="time-icon"></image>
					<view>{{dateFormat(item.publishTimes)}}</view>
				</view>
			</view>
		</navigator>
		<Empty v-if="!dataList.length"></Empty>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// IMG_URL: getApp().globalData.IMG_URL,
				swiperList: [],
				swiperIndex: 0,
				dataList: [],
				queryData: {
					pageNo: 1,
					pageSize: 10,
					total: 0,
					type: 10
				}
			};
		},
		onLoad(options) {
			this.getBannerList()
			this.getRequestList()
		},
		onPullDownRefresh() {
			this.queryData.pageNo = 1
			this.getRequestList()
		},
		onReachBottom() {
			this.queryData.pageNo += 1
			this.getRequestList()
		},
		methods: {
			async getBannerList() {
				const res = await uni.$api.bannerList(20)
				this.swiperList = res.data || []
			},
			async getRequestList() {
				uni.$util.showLoading()
				const res = await uni.$api.getArticleFindPage(this.queryData).finally(uni.finally)
				const list = res.data.rows || []
				this.queryData.total = res.data.totalRows
				this.dataList = this.queryData.pageNo == 1 ? list : this.dataList.concat(list)
			}
		}
	}
</script>

<style scoped lang="scss">
	.swiper-view {
		width: 100%;
		height: 254rpx;
		position: relative;

		.swiper-css {
			width: 100%;
			height: 100%;

			.swiper-image {
				width: 100%;
				height: 100%;
			}
		}

		.swiper-dot {
			width: 100%;
			@extend .row;
			position: absolute;
			z-index: 1;
			left: 0;
			bottom: 32upx;

			.dot-item {
				width: 14rpx;
				height: 2px;
				background: rgba($color: #FFFFFF, $alpha: 0.5);
				transition: all 0.3s;
			}

			.dot-item+.dot-item {
				margin-left: 13upx;
			}

			.dot-active {
				width: 33rpx;
				height: 2px;
				background: #FFFFFF;
			}
		}
	}

	.card-view {
		width: 707rpx;
		padding: 22upx;
		margin: 0 auto;
		background: #FFFFFF;
		border-radius: 14rpx;
		@extend .row-between;
		margin-top: 18upx;

		.card-image {
			width: 159rpx;
			height: 120rpx;
			background: #D8D8D8;
			border-radius: 7rpx;
		}

		.card-content {
			width: calc(100% - 159upx - 22upx);
			height: 120rpx;
			@extend .column;
			justify-content: space-between;

			.name-text {
				width: 100%;
				@extend .text-dot-one;
				-webkit-line-clamp: 2;
				font-size: 25rpx;
				font-weight: 400;
				color: #2C1101;
			}

			.time-view {
				width: 100%;
				@extend .row-start;
				font-size: 22rpx;
				font-weight: 400;
				color: #B8ACA3;

				.time-icon {
					width: 22upx;
					height: 22upx;
					margin-right: 11upx;
				}
			}
		}
	}
</style>